<template>
  <el-tabs v-model="activeName" @tab-click="clickTab">
    <el-tab-pane label="主起升" name="1">
      <div class="container">
        <div class="row">
          <div class="column">
            <span class="title">档位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B23)"
              >主起升零位</span
            >
            <span class="item" :class="getColorClass(boolData.B24)"
              >主起升上升</span
            >
            <span class="item" :class="getColorClass(boolData.B25)"
              >主起升下降</span
            >
            <span class="item" :class="getColorClass(boolData.B26)"
              >主起升二档</span
            >
            <span class="item" :class="getColorClass(boolData.B27)"
              >主起升三档</span
            >
            <span class="item" :class="getColorClass(boolData.B28)"
              >主起升四档</span
            >
          </div>
          <div class="column">
            <span class="title">限位（输入点）</span>
            <span class="double-columns">
              <div class="sub-column">
                <span class="item" :class="getColorClass(boolData.B1)"
                  >主起升上极限</span
                >
                <span class="item" :class="getColorClass(boolData.B2)"
                  >主起升下极限</span
                >
                <span class="item" :class="getColorClass(boolData.B18)"
                  >主起升电机1制动器2</span
                >
                <span class="item" :class="getColorClass(boolData.B20)"
                  >主起升电机2制动器2</span
                >
              </div>
              <div class="sub-column">
                <span class="item" :class="getColorClass(boolData.B5)"
                  >主起升重锤限位</span
                >
                <span class="item" :class="getColorClass(boolData.B17)"
                  >主起升电机1制动器1</span
                >
                <span class="item" :class="getColorClass(boolData.B19)"
                  >主起升电机2制动器1</span
                >
              </div>
            </span>
          </div>
          <div class="column">
            <span class="title">故障报警（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B14)"
              >主起升电机1超速</span
            >
            <span class="item" :class="getColorClass(boolData.B15)"
              >主起升电机2超速</span
            >
            <span class="input-item">
              <span class="label">工作循环总次数</span>
              <el-input
                v-model="realData.R10"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
            </span>
            <span class="input-item">
              <span class="label">上次工作循环重量</span>
              <el-input
                v-model="inputValue"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">t</span>
            </span>
            <span class="input-item">
              <span class="label">上次工作循环时间</span>
              <el-input
                v-model="realData.R8"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">h</span>
            </span>
            <span class="input-item">
              <span class="label">工作循环总重量</span>
              <el-input
                v-model="realData.R10A"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">t</span>
            </span>
            <span class="input-item">
              <span class="label">工作循环总时间</span>
              <el-input
                v-model="realData.R9"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">h</span>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="column">
            <span class="double-columns">
              <div class="sub-column">
                <span class="input-item">
                  <span class="label">主起升重量</span>
                  <el-input
                    v-model="realData.R1"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">吨</span>
                </span>
              </div>
              <div class="sub-column">
                <span class="input-item">
                  <span class="label">主起升高度</span>
                  <el-input
                    v-model="realData.R3"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">米</span>
                </span>
              </div>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="column">
            <span class="input-item">
              <span class="label">主起升电机1电流A</span>
              <el-input
                v-model="realData.R11"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">主起升电机1电流B</span>
              <el-input
                v-model="realData.R12"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">主起升电机1电流C</span>
              <el-input
                v-model="realData.R13"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
          </div>
          <div class="column">
            <span class="input-item">
              <span class="label">主起升电机2电流A</span>
              <el-input
                v-model="realData.R14"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">主起升电机2电流B</span>
              <el-input
                v-model="realData.R15"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">主起升电机2电流C</span>
              <el-input
                v-model="realData.R16"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="副起升" name="2">
      <div class="container">
        <div class="row">
          <div class="column">
            <span class="title">档位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B29)"
              >副起升零位</span
            >
            <span class="item" :class="getColorClass(boolData.B30)"
              >副起升上升</span
            >
            <span class="item" :class="getColorClass(boolData.B31)"
              >副起升下降</span
            >
            <span class="item" :class="getColorClass(boolData.B32)"
              >副起升二档</span
            >
            <span class="item" :class="getColorClass(boolData.B33)"
              >副起升三档</span
            >
            <span class="item" :class="getColorClass(boolData.B34)"
              >副起升四档</span
            >
          </div>
          <div class="column">
            <span class="title">限位（输入点）</span>
            <span class="double-columns">
              <div class="sub-column">
                <span class="item" :class="getColorClass(boolData.B3)"
                  >副起升上极限</span
                >
                <span class="item" :class="getColorClass(boolData.B4)"
                  >副起升下极限</span
                >
                <span class="item" :class="getColorClass(boolData.B6)"
                  >副起升重锤</span
                >
              </div>
              <div class="sub-column">
                <span class="item" :class="getColorClass(boolData.B21)"
                  >副起升制动器1</span
                >
                <span class="item" :class="getColorClass(boolData.B22)"
                  >副起升制动器2</span
                >
              </div>
            </span>
          </div>
          <div class="column">
            <span class="title">故障报警（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B16)"
              >副起升超速</span
            >
          </div>
        </div>
        <div class="row">
          <div class="column">
            <span class="input-item">
              <span class="label">副起升重量</span>
              <el-input
                v-model="realData.R2"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">吨</span>
            </span>
            <span class="input-item">
              <span class="label">副起升高度</span>
              <el-input
                v-model="realData.R4"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">米</span>
            </span>
          </div>
          <div class="column">
            <span class="input-item">
              <span class="label">副起升电机电流A</span>
              <el-input
                v-model="realData.R17"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">副起升电机电流B</span>
              <el-input
                v-model="realData.R18"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">副起升电机电流C</span>
              <el-input
                v-model="realData.R19"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="主小车" name="3"
      ><div class="container">
        <div class="row">
          <div class="column">
            <span class="title">档位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B36)"
              >主小车滑行一档</span
            >
            <span class="item" :class="getColorClass(boolData.B37)"
              >主小车二档向前</span
            >
            <span class="item" :class="getColorClass(boolData.B38)"
              >主小车二档向后</span
            >
            <span class="item" :class="getColorClass(boolData.B39)"
              >主小车三档</span
            >
            <span class="item" :class="getColorClass(boolData.B40)"
              >主小车四档</span
            >
          </div>
          <div class="column">
            <span class="title">限位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B7)"
              >主小车前极限</span
            >
            <span class="item" :class="getColorClass(boolData.B8)"
              >主小车后极限</span
            >
          </div>
          <div class="column"></div>
        </div>
        <div class="row">
          <div class="column">
            <span class="input-item">
              <span class="label">主小车位置</span>
              <el-input
                v-model="realData.R5"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">米</span>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="column">
            <span class="double-columns">
              <span class="sub-column">
                <span class="input-item">
                  <span class="label">主小车电机1电流A</span>
                  <el-input
                    v-model="realData.R32"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">主小车电机1电流B</span>
                  <el-input
                    v-model="realData.R33"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">主小车电机1电流C</span>
                  <el-input
                    v-model="realData.R34"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
              </span>
              <span class="sub-column">
                <span class="input-item">
                  <span class="label">主小车电机2电流A</span>
                  <el-input
                    v-model="realData.R35"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">主小车电机2电流B</span>
                  <el-input
                    v-model="realData.R36"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">主小车电机2电流C</span>
                  <el-input
                    v-model="realData.R37"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="副小车" name="4">
      <div class="container">
        <div class="row">
          <div class="column">
            <span class="title">档位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B41)"
              >副小车滑行一档</span
            >
            <span class="item" :class="getColorClass(boolData.B42)"
              >副小车二档向前</span
            >
            <span class="item" :class="getColorClass(boolData.B43)"
              >副小车二档向后</span
            >
            <span class="item" :class="getColorClass(boolData.B44)"
              >副小车三档</span
            >
            <span class="item" :class="getColorClass(boolData.B45)"
              >副小车四档</span
            >
          </div>
          <div class="column">
            <span class="title">限位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B9)"
              >副小车前极限</span
            >
            <span class="item" :class="getColorClass(boolData.B10)"
              >副小车后极限</span
            >
          </div>
          <div class="column"></div>
        </div>
        <div class="row">
          <div class="column">
            <span class="input-item">
              <span class="label">副小车位置</span>
              <el-input
                v-model="realData.R6"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">米</span>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="column">
            <span class="input-item">
              <span class="label">副小车电机电流A</span>
              <el-input
                v-model="realData.R38"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">副小车电机电流B</span>
              <el-input
                v-model="realData.R39"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
            <span class="input-item">
              <span class="label">副小车电机电流C</span>
              <el-input
                v-model="realData.R40"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">A</span>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="大车" name="5">
      <div class="container">
        <div class="row">
          <div class="column">
            <span class="title">档位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B46)"
              >大车滑行一档</span
            >
            <span class="item" :class="getColorClass(boolData.B47)"
              >大车二档向左</span
            >
            <span class="item" :class="getColorClass(boolData.B48)"
              >大车二档向右</span
            >
            <span class="item" :class="getColorClass(boolData.B49)"
              >大车三档</span
            >
            <span class="item" :class="getColorClass(boolData.B50)"
              >大车四档</span
            >
          </div>
          <div class="column">
            <span class="title">限位（输入点）</span>
            <span class="item" :class="getColorClass(boolData.B11)"
              >大车左极限</span
            >
            <span class="item" :class="getColorClass(boolData.B12)"
              >大车右极限</span
            >
            <span class="item" :class="getColorClass(boolData.B13)"
              >大车门限位</span
            >
          </div>
          <div class="column"></div>
        </div>
        <div class="row">
          <div class="column">
            <span class="input-item">
              <span class="label">大车位置</span>
              <el-input
                v-model="realData.R7"
                class="form-input"
                style="width: 100px"
                disabled
              ></el-input>
              <span class="unit">米</span>
            </span>
          </div>
        </div>
        <div class="row">
          <div class="column">
            <div class="double-columns">
              <div class="sub-column">
                <span class="input-item">
                  <span class="label">大车电机1电流A</span>
                  <el-input
                    v-model="realData.R20"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机1电流B</span>
                  <el-input
                    v-model="realData.R21"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机1电流C</span>
                  <el-input
                    v-model="realData.R22"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机2电流A</span>
                  <el-input
                    v-model="realData.R23"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机2电流B</span>
                  <el-input
                    v-model="realData.R24"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机2电流C</span>
                  <el-input
                    v-model="realData.R25"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
              </div>
              <div class="sub-column">
                <span class="input-item">
                  <span class="label">大车电机3电流A</span>
                  <el-input
                    v-model="realData.R26"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机3电流B</span>
                  <el-input
                    v-model="realData.R27"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机3电流C</span>
                  <el-input
                    v-model="realData.R28"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机4电流A</span>
                  <el-input
                    v-model="realData.R29"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机4电流B</span>
                  <el-input
                    v-model="realData.R30"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
                <span class="input-item">
                  <span class="label">大车电机4电流C</span>
                  <el-input
                    v-model="realData.R31"
                    class="form-input"
                    style="width: 100px"
                    disabled
                  ></el-input>
                  <span class="unit">A</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div></el-tab-pane
    >
  </el-tabs>
</template>
<script>
import dam from "../../../diagnosis/dam.vue";
import { serachBoolData, serachRealData } from "../../../../../api/service";
const mockData = require("./mockData.json");
export default {
  components: { dam },
  data() {
    return {
      activeName: "1",
      inputValue: "0",
      timer: null, // 定时器timer
      boolData: {}, // bool值
      realData: {}, // real值
      minTimeInterval: 1000, // 最小时间间隔，单位：毫秒
      flag: true, // 判断是否在该组件，离开时设置false，阻止下一次执行数据请求
    };
  },
  created() {},
  methods: {
    clickTab(tab) {},
    open() {
      // 开启组件时，由父组件调用该方法
      this.flag = true;
      this.getData();
    },
    close() {
      // 关闭组件时，由父组件调用该方法
      // console.log('调用子组件关闭');
      this.flag = false;
    },
    getColorClass(bool) {
      // 红点是true，绿点是false
      // console.log('调用颜色判断,bool是：',bool)
      if (+bool) {
        return "red";
      } else {
        return "green";
      }
    },
    getData() {
      // 同时获取布尔值和实数值
      // console.log('开始请求数据')
      const startTime = new Date().getTime();
      Promise.all([serachBoolData(), serachRealData()])
        .then((res) => {
          this.boolData = res[0].data;
          this.realData = res[1].data;
          this.realData.R10A = this.realData.R10 * 5;
          // 每请求成功一次后调用自身，进行下一次调用
          // 首先判断是否还在组件内
          if (this.flag !== true) {
            return;
          }
          // 判断与上一次请求的时间间隔
          const endTime = new Date().getTime();
          if (endTime - startTime > this.minTimeInterval) {
            // 只有当两次请求的时间超过最小时间阈值，才立即进行下一次请求
            this.getData();
          } else {
            // 否则设置延时执行
            setTimeout(() => {
              this.getData();
            }, this.minTimeInterval - (endTime - startTime));
          }
        })
        .catch((err) => {
          // 请求数据失败，不进行下一次请求，调用假数据接口
          // ...
          this.getMockData();
        });
    },
    getMockData() {
      // console.log(mockData.REAL_RECORDS.length);
      // 随机获取一个0~99的索引
      const index = parseInt(Math.random() * 100);
      this.realData = mockData.REAL_RECORDS[index];
      this.boolData = mockData.BOOL_RECORDS[index];
      this.realData.R10A = this.realData.R10 * 5;
      // 设置1000ms的延迟，获取下一个数据
      setTimeout(() => {
        // 同样根据flag判断是否取下一个数据
          if (this.flag !== true) {
            return;
          }else{
            this.getMockData();
          }
      }, 1000);
    },
  },
};
</script>
<style lang="less" scoped>
div.container {
  display: flex;
  flex-direction: column;
  color: black;
  div.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    div.column {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-grow: 1;
      border: 1px grey solid;
      .title {
        margin: 20px;
        font-size: 18px;
      }
      .item {
        margin: 20px;
        font-size: 16px;
        &:before {
          // content: " ";
          // background-color: green;
          // display: inline-block;
          // position: relative;
          // left: -4px;
          // top: 5px;
          // width: 15px;
          // height: 15px;
          // border: 1px solid white;
          // border-radius: 50%;
        }
      }
      .item.red {
        &:before {
          content: " ";
          background-color: red;
          display: inline-block;
          position: relative;
          left: -4px;
          top: 5px;
          width: 15px;
          height: 15px;
          border: 1px solid white;
          border-radius: 50%;
        }
      }
      .item.green {
        &:before {
          content: " ";
          background-color: green;
          display: inline-block;
          position: relative;
          left: -4px;
          top: 5px;
          width: 15px;
          height: 15px;
          border: 1px solid white;
          border-radius: 50%;
        }
      }
      .input-item {
        margin: 20px;
        font-size: 16px;
        margin-left: 150px;
        margin-right: 100px;
        position: relative;
        .label {
          position: absolute;
          left: -160px;
          top: 5px;
          width: 150px;
          text-align: right;
        }
        .unit {
          position: absolute;
          top: 5px;
          right: -20px;
        }
      }
      .double-columns {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        .sub-column {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    }
  }
}
.form-input /deep/ .el-input__inner {
  color: rgb(0, 0, 0) !important;
  height: 30px;
  &:hover {
    cursor: default;
  }
}
</style>